import React from 'react';
import { Button, Form, Input,message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {Link, useNavigate} from "react-router-dom"
import "./less/Login.less";
import {RegisterApi} from "../request/api";
import logoImg from "../assets/logo.png";

export default function Register() {
    const navigate=useNavigate()
    const onFinish = (values) => {
        RegisterApi({
            nickname:values.username,
            account: values.account,
            password: values.password
        }).then(res  =>{
            console.log(res)
            if(res.code===200){
                message.success("注册成功！正在跳转登录页");
                //跳到登录页
                setTimeout(()=>navigate('/login'),1500)
            }else {
                message.error(res.msg);
            }
        })//跨域
    };

    return (
        <div className='login'>
            <div className="login_box">
                <img src={logoImg} alt=""/>
                <Form
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入昵称',
                            },
                        ]}
                    >
                        <Input className='input' size="large" prefix={<UserOutlined />} placeholder="请输入昵称"/>
                    </Form.Item>
                    <Form.Item
                        name="account"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名',
                            },
                        ]}
                    >
                        <Input className='input' size="large" prefix={<UserOutlined />} placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input.Password className='input' size="large" prefix={<LockOutlined />} placeholder="请输入密码"/>
                    </Form.Item>
                    <Form.Item
                        name="confirm"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: '请再次确认密码',
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('请输入相同密码!'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password className='input' size="large" prefix={<LockOutlined />} placeholder="请再次确认密码"/>
                    </Form.Item>
                    <Form.Item>
                        <Link to="/login">已有账号？立即登录</Link>
                    </Form.Item>

                    <Form.Item>
                        <Button className='input' size="large" type="primary" htmlType="submit" block>
                            立即注册
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}